<template>
  <div>
      <h2>第十三届山东省ICPC大学生程序设计竞赛(正式赛)</h2>
  </div>

  <div class="box all"><button>所有队伍</button></div>
  <div class="box concerned"><button>关注队伍</button></div>
  <div class="box form"><button>正式队伍</button></div>
  <div class="box star"><button>打星队伍</button></div>
  <div class="box" id="select">
    <select 
    class="form-select"
     id="Select" 
     aria-label="Default select example">
      <option selected value="0">School Filter</option>
      <option value="1" class="lcu">聊城大学</option>
      <option value="2">临沂大学</option>
      <option value="3">山东大学</option>
      <option value="4">山东理工大学</option>
      <option value="5">中国海洋大学</option>
  </select>
  </div>
    
  <div class="left"></div>
    <div class="mid">
      <table class="Tab">
        <tr>
          <th>Place</th>
          <th>School</th>
          <th>Team</th>
          <th>Solved</th>
          <th>Time</th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
        </tr>
        <tr>
            <td>1</td>
            <td>{{it[0].sname}}</td>
            <td>{{it[0].tname}}</td>
            <td>{{it[0].ac_cnt}}</td>
            <td>{{it[0].fashi}}</td>
            <td>{{it[0].scA}}</td>
            <td>{{it[0].scB}}</td>
            <td>{{it[0].scC}}</td>
            <td>{{it[0].scD}}</td> 
          </tr>
          <tr>
            <td>2</td>
            <td>{{it[1].sname}}</td>
            <td>{{it[1].tname}}</td>
            <td>{{it[1].ac_cnt}}</td>
            <td>{{it[1].fashi}}</td>
            <td>{{it[1].scA}}</td>
            <td>{{it[1].scB}}</td>
            <td>{{it[1].scC}}</td>
            <td>{{it[1].scD}}</td>
          </tr>
          <tr>
            <td>3</td>
            <td>{{it[2].sname}}</td>
            <td>{{it[2].tname}}</td>
            <td>{{it[2].ac_cnt}}</td>
            <td>{{it[2].fashi}}</td>
            <td>{{it[2].scA}}</td>
            <td>{{it[2].scB}}</td>
            <td>{{it[2].scC}}</td>
            <td>{{it[2].scD}}</td>
          </tr>
          <tr>
            <td>4</td>
            <td>{{it[3].sname}}</td>
            <td>{{it[3].tname}}</td>
            <td>{{it[3].ac_cnt}}</td>
            <td>{{it[3].fashi}}</td>
            <td>{{it[3].scA}}</td>
            <td>{{it[3].scB}}</td>
            <td>{{it[3].scC}}</td>
            <td>{{it[3].scD}}</td>
          </tr>
      </table>
    </div>
    <div class="right"></div>
    <router-view/>
</template>
<script>
  import "bootstrap/dist/css/bootstrap.min.css"
  import "bootstrap/dist/js/bootstrap"
  import $ from 'jquery';
  import { ref } from 'vue';
  export default{
    name : "LCU",
    setup : () => {
      let it = ref("");
      $.ajax({
        url :"http://127.0.0.1:1234/index/all/lcu/",
        type :"get",
        success: resp => {
          it.value = resp;  
        }
      });
      return {
        it,
      } 
    }    
  }
  $(function () {
    $(".all").click(function(){
          window.location.href="http://localhost:8080/all/";
         });
         $(".concerned").click(function(){
          window.location.href="http://localhost:8080/concerned/";
         });
         $(".form").click(function(){
          window.location.href="http://localhost:8080/form/";
         });
         $(".star").click(function(){
          window.location.href="http://localhost:8080/star/";
         });
      var selects = document.getElementById("Select");
  selects.onchange = function () {
    var indexs = selects.selectedIndex;  //选中项的索引
    var s = selects.options[indexs].value;
    console.log(s);
    if(s == 1)
    {
      console.log("su");
      window.location.href="http://localhost:8080/lcu/";
    }
    else if(s == 2)
    {
      window.location.href="http://localhost:8080/lyu/";
    }
    else if(s == 3)
    {
      window.location.href="http://localhost:8080/sdu/";
    }
    else if(s == 4)
    {
      window.location.href="http://localhost:8080/sdlgu/";
    }
    else if(s == 5)
    {
      window.location.href="http://localhost:8080/seau/";
    }

    }
     
    })
   

</script>
<style>

.box{
  float: left;
  margin-right: 12px;
  margin-bottom: 10px;
}
h2{
  text-align: center;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 4px;
}
tr{
  text-align: center;
}
th{
  background-color: bisque;
}
input{
  width: 100px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
table{
  width: 170vh;
  height: 10vh;
  margin: 20px auto;
}
tr:nth-child(odd){
  background-color: rgb(248,248,248,);
}
tr:nth-child(even){
  background-color: rgb(242, 242, 242);
}
</style>
